<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS面试题</title>
    <link rel="stylesheet" href="../1style/index.css"/>
    <script src="../1style/jquery.js"></script>
</head>
<body>
<h1>CSS面试题</h1>

<h3>请解释一下CSS3的Flex-box（弹性盒布局模型）,以及适用场景？</h3>
<div>
    <pre>https://www.bilibili.com/video/BV1xz4y1D7pA
      设为Flex布局以后（ display: flex;），子元素的float、clear和vertical-align属性将失效。
    3、flex-flow: flex-direction flex-wrap;//以上2个属性的简写
    6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;//多根轴线的对齐方式容器的属性
    1、flex-direction: row | row-reverse | column | column-reverse;//item的排列方向
    2、flex-wrap: nowrap | wrap | wrap-reverse;//项目溢出如何换行
    4、justify-content: flex-start | flex-end | center | space-between | space-around;//x对齐方式
    5、align-items: flex-start | flex-end | center | baseline | stretch;//y对齐方式
    项目的属性
        1,order 		属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
        2,flex-grow  	flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
        3,flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        4,flex-basis	属性定义了在分配多余空间之前，项目占据的主轴空间,默认值为auto
        5,flex		    属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
        6,align-self
    </pre>
</div>

<h3> CSS3有哪些新特性？</h3>
<div>
    <pre>
    CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）
    增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局
    1. CSS3实现圆角（border-radius），阴影（box-shadow），
    2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
    3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
    4. 增加了更多的CSS选择器  多背景 rgba     7. border-image
    5. 在CSS3中唯一引入的伪元素是 ::selection.
    6. 媒体查询，多栏布局  @media screen and (max-width: 1000px) and (min-width: 700px){}
    link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css"
    all适用于所有类型  print 适用于打印机和打印预览   screen电脑,平板,手机等 speech  适用于屏幕阅读器
    </pre>
</div>

<h3>css3中的变形(transform)过渡(transtion)动画(animation)的区别</h3>
<div>
    <pre>
    transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
    transition:常用写法：transition：transform（名称） 1.2s（过渡时间） linear（过渡方式） 2s（过渡开始时间）
    transition:让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
      过渡分为两个阶段：前进(forward)和反向(reverse)  触发方式::hover、:focus、:active等
      transition-property: 过渡属性(默认值为all,颜色,位置,长度)  transition-duration: 过渡持续时间(默认值为0s)
      transiton-timing-function: 过渡函数(默认值为ease函数) transition-delay: 过渡延迟时间(默认值为0s)
    animation:
      animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
      animation: move1 1s  alternate linear 3;
      animation: move2 4s
      @keyframes animationName{
          0%{background-color: blue;}
          100%{background-color: black;}
      }
    https://segmentfault.com/a/1190000012698032
    </pre>
</div>

<h3>CSS旋转属性怎么用？transform 有哪些用法</h3>
<div>
    <pre>
    一.旋转 rotate 二.缩放 scale 三.移动 translate
    四.倾斜 skew; 五.基准点 transform-origin
    </pre>
</div>

<h3>CSS3新增伪类/伪元素各有那些</h3>
<div>
    <pre>
     伪元素:: ::first-letter   ::first-line    ::before ::after ::selection
     伪类:    p:last-child    :not(p)       p:first-child
    </pre>
</div>

<h3>CSS3 calc() 函数</h3>
<div>
    <pre>
    运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
    calc()函数支持 "+", "-", "*", "/" 运算；
    </pre>
</div>

<h3>让一个盒子左右垂直居中</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV1At41137DG?p=8 // 程序员节到来之际
    </pre>
</div>

<h3>瀑布流</h3>
<div>
    <pre>
        1.等宽不等高
    </pre>
</div>

<h3>双飞翼--圣杯布局</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV17J411x7Mo
    </pre>
</div>

<h3>居中为什么要使用Transform（为什么不使用MarginLeft/Top）</h3>
<div>
    <pre>
    Transform 只会重绘 , MarginLeft/Top 会引起重排
    </pre>
</div>

<h3> position:fixed;在android下无效怎么处理？</h3>
<div>
    <pre>
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    </pre>
</div>

<h3>以下必须准确说明含义 p span || p > span || p + span || p ~ span</h3>
<div>
    <pre>
      p span    // p下面的所有span  ||  p > span  // p下面的第一层span,只选到儿子,不选择孙子
      p + span  // p相邻(下面的)兄弟span (单选|1个)   || p ~ span p相邻(下面的)兄弟span (多选|下面的所有) 通用选择器
    </pre>
</div>

<h3>CSS中display/float/position属性值的相互影响	</h3>
<div>
    <pre>
    'display'值为'none'，则'position' 和 'float'无作用。这种情况下，不生成box。
    如果'position'值为'absolute' 或 'fixed', box被绝对定位，
    而'display'的box设定。的位置将由'top', 'right', 'bottom' 和 'left'
    </pre>
</div>

<h3>display、float、position的关系</h3>
<div>
    <pre>
    如果 display 取值为 none ，那么 position 和 float 都不起作⽤，这种情况下元素不产⽣框
    否则，如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计算值为 none ， display 根据下⾯的表格进⾏调整。
    否则，如果 float 不是 none ，框是浮动的， display 根据下表进⾏调整
    否则，如果元素是根元素， display 根据下表进⾏调整
    其他情况下 display 的值为指定值
    总结起来：绝对定位、浮动、根元素都需要调整 display
    </pre>
</div>

<h3>display、opacity、visibility的区别？</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV1w7411d7rC?p=3
        display：none 从渲染树中消失，不占据空间，不能点击  visibility：hidden 从渲染树消失，占据空间，不能点击
        opacity：0 从渲染树消失，占据空间，可以点击
display：none 引起页面回流与重绘，性能消耗大
visibility：hidden 只造成本元素的重绘，性能消耗较少
opacity：0 只造成本元素重绘，性能消耗较少
    </pre>
</div>

<h3>css样式（选择器）的优先级</h3>
<div>
    <pre>
    !important
    行内样式1000  id选择器 100     类选择器 10 元素选择器 1
    </pre>
</div>

<h3>你对line-height是如何理解的？</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV1rJ411S7Jf
        基线位置是由字体确定的，css的line-height指的是一行字的高度，包含了字间距，实际上就是下一行的基线到上一行的基线距离。
        line-height的值跟height的值一样，字体就会垂直居中;
    </pre>
</div>

<h3>让页面里的字体变清晰，变细用CSS怎么做？？</h3>
<div>
    <pre>
    CSS3里面加入了一个-webkit-font-smoothing属性。
    这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
    加上之后就顿时感觉页面小清晰了。
    </pre>
</div>

<h3>CSS优化、提高性能的方法有哪些？</h3>
<div>
    <pre>
    避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法
    避免不必要的命名空间 避免不必要的重复
    最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
    尽可能的精简规则，你可以合并不同类里的重复规则
    </pre>
</div>

<h3>为什么不建议使用css import指令</h3>
<div>
    <pre>
        只有在引用它的那个css文件被下载、浏览器才会知道还有另外一个css需要下载，这时才去下载
        因此css @import引起的css解析延迟会加长页面留白期,也不是DOM的节点,js无法获取到
    </pre>
</div>

<h3>Canvas默认画布大小</h3>
<div>
    <pre>
        &lt;canvas id="canvas01" width="300" height="400">IE8以下不支持&lt;canvas> 没有单位
        let canvas = document.getElementById("canvas01");   //获取canvas元素
        let ctx = canvas.getContext("2d");  //创建2d context对象
        canvas.toDataURL("image/png", 0.8)  //转成了base64
        Canvas 用于 手机端签名, 图片压缩
    </pre>
</div>

<h3>BFC是什么,有什么作用</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV16b411H7Pz
        BFC（Block Formatting Context）块级格式化上下文,形成独立的渲染区域,内部渲染不会影响外部
        条件: float 不是none, position:absolute/fixed  overflow:hidden  flex元素  inline-block
        解决:父元素坍塌的问题:
    </pre>
</div>

<h3>说说你对css的will-change属性的理解，它有什么作用呢？</h3>
<div>
    <pre>
    告诉浏览器,这个元素的某些属性可能会频繁变动触发回流，要求浏览器给予资源进行优化，一般浏览器会给这个元素单独生成一个图层渲染提高页面反应速度
    不应过度使用这个属性,这属性只是性能出现问题的最后手段
    </pre>
</div>

<h3>z-index有时不起作用的原因是什么？怎么解决？</h3>
<div>
    <pre>
    2、设置了浮动  解决：清除浮动
    3、父元素position为relative  解决：设置为absolute
    </pre>
</div>

</body>
</html>

<script>
  $(function () {
    $("h3").click(function () {
      $(this).next().toggle();
    });
  })
</script>

